import { Popover } from 'antd';
import React from 'react';
import Styles from './SOC.less';

type socType = {
  data: any;
  type: string;
};
type IProps = {
  socInfoOptions: socType;
  clickSOC: (data: any) => void;
};
const SOC: React.FC<IProps> = (props) => {
  const {socInfoOptions, clickSOC} = props // prettier-ignore
  // let data = [
  //   // x, y, value, 其他信息
  //   [0, 0, 10, {detail: '箱1', name: "001"}],
  //   [0, 1, 20, {detail: '箱2', name: "002"}],
  //   [1, 0, 30, {detail: '箱3', name: "003"}],
  //   [1, 1, 40, {detail: '箱4', name: "004"}],
  // ];

  // const socChartOptions: MyChartOption = {
  //   tooltip: {
  //     position: 'top',
  //     formatter: function (params) {
  //       let dataItem = data[params.dataIndex];
  //       let detail = dataItem[3].detail; // 获取detail属性
  //       let name = dataItem[3].name;
  //       return '簇名称 : ' + detail + '<br>' + 'SOC: ' + params.value[2] + '<br>' + '编号：' + name;
  //     },
  //   },
  //   grid: {
  //     height: '50%',
  //     y: '10%',
  //   },
  //   xAxis: {
  //     show: false,
  //     type: 'category',
  //     data: ['X0', 'X1'],
  //   },
  //   yAxis: {
  //     show: false,
  //     type: 'category',
  //     data: ['Y0', 'Y1'],
  //   },
  //   visualMap: {
  //     itemHeight: 200,
  //     text: ['', 'SOC'],
  //     min: 0,
  //     max: 100,
  //     color: ['#0F66FF', '#fff'],
  //     calculable: true,
  //     orient: 'horizontal',
  //     left: 'center',
  //     bottom: '15%',
  //   },
  //   series: [
  //     {
  //       name: 'Punch Card',
  //       type: 'heatmap',
  //       data: data.map(function (item) {
  //         return [item[0], item[1], item[2]]; // 只返回前三个元素（x, y, value）
  //       }),
  //       label: {
  //         show: true,
  //         formatter: function (params) {
  //           let dataItem = data[params.dataIndex];
  //           return dataItem[3].detail; // 获取detail属性
  //         },
  //       },
  //     },
  //   ],
  // };
  const getBGColor = (value: number) => {
    const startColor = [209, 226, 254];
    const endColor = [15, 102, 255];
    const position = (value - 0) / (100 - 0);
    const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * position);
    const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * position);
    const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * position);
    return `rgb(${r},${g},${b})`;
  };
  const matchLast = (str: string) => {
    const pattern = /(\d+|[^\d]+\d+)$/g;
    const result = pattern.exec(str);
    return result ? result[1] : '';
  };
  return (
    <div>
      <div className={Styles.socContent}>
        {socInfoOptions?.data?.map((item) => {
          return (
            <Popover
              placement="rightTop"
              key={item.deviceCode}
              content={
                <div>
                  <div>名称:{matchLast(item.deviceName)}</div>
                  <div>SOC:{item.soc}%</div>
                  <div>编号:{item.deviceCode}</div>
                </div>
              }
            >
              <div
                onClick={() => {
                  clickSOC(item);
                }}
                style={{
                  backgroundColor: getBGColor(item.soc),
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
                className={Styles.socBox}
              >
                <div>名称：{matchLast(item.deviceName)}</div>
                <div>SOC：{item.soc}%</div>
              </div>
            </Popover>
          );
        })}
      </div>
      {/*<div className={Styles.colorLinter}>*/}
      {/*  <Flex justify={'space-between'} align="center" style={{ marginInline: 6 }}>*/}
      {/*    <div>0%</div>*/}
      {/*    <div>100%</div>*/}
      {/*  </Flex>*/}
      {/*</div>*/}
    </div>
  );
};

export default SOC;
